<!--
 * @Author: Rain
 * @Date: 2023/09/26 16:43:34
 * @LastEditTime: 2024-01-11 16:57:52
 * @Description: Do Something
-->
<template>
  <div class="w-full flex flex-col">
    <div class="flex items-center w-full">
      <div
        v-if="!!imgPath"
        class="flex justify-center relative mr-20 w-88 h-88 border border-solid border-gray-300"
      >
        <img :src="imgPath | imgTransform" class="avatar">
        <i
          class="el-icon-circle-close cursor-pointer absolute top-0 right-0"
          @click="deleteFile"
        />
      </div>
      <el-upload
        ref="uploadFile"
        class="avatar-uploader w-88 h-88"
        :auto-upload="false"
        action=""
        :show-file-list="false"
        :http-request="handleUpload"
        :on-change="beforeAvatarUpload"
        accept="image/png,image/jpeg"
        :limit="1"
        :class="{ hide: imgPath}"
      >
        <i class="el-icon-plus avatar-uploader-icon" />
      </el-upload>
    </div>
    <div v-if="showTip" slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过2M</div>
  </div>
</template>

<script>
import upload from '@/mixins/upload'
export default {
  mixins: [upload],
  props: {
    src: {
      type: String,
      default: () => ''
    },
    showTip: {
      type: Boolean,
      default: () => true
    }
  },
  data() {
    return {}
  },
  watch: {
    src: {
      handler(newVal) {
        this.imgPath = newVal
      },
      immediate: true
    }
  },
  methods: {
    deleteFile() {
      this.imgPath = ''
      this.$refs.uploadFile.clearFiles()
      this.$emit('upload', this.imgPath)
    }
  }
}
</script>
<style scoped lang="scss">
::v-deep.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 88px;
  height: 88px;
  line-height: 88px;
  text-align: center;
}
.avatar {
  width: 86px;
  height: 86px;
  display: block;
}
.el-upload__tip {
  font-size: 12px;
  color: #409eff;
}
video {
  object-fit: cover;
}

.hide {
    visibility: hidden;
}
</style>
